<template>
  <div class="mod-div">
    <div v-if="!isCompleted" class="div-ws">
      <div class="div-inquire">
      <div class="in-t">
          <div class="in-ts"></div>
          <h3>完善企业信息</h3>
        </div>
      </div>
      <!-- <el-steps :active="active" finish-status="success">
        <!-- <el-step title="基础信息"></el-step> -->
        <!-- <el-step title="企业资质"></el-step> -->
        <!-- <el-step title="确认信息"></el-step> -->
      <!-- </el-steps> -->
      <div class="div-com">
        <div class="div-coms">
        <div class="div-img"></div>
        <div class="div-text">
        <div class="div-name">{{companys.tenantName}}</div>
        <div class="div-code">{{companys.certificateCode}}</div>
        </div>
        </div>
      </div>
      <div v-if="active === 0" class="div-tx">
        <el-form class="div-form" :model="baseInfoForm" :rules="baseInfoRule" ref="baseInfoForm" label-width="150px">
          <el-form-item label="法定代表人" prop="businessEntity">
            <el-input v-model="baseInfoForm.businessEntity" placeholder="请填写法定代表人"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人手机号">
            <el-input v-model="baseInfoForm.businessEntityMobile" placeholder="请填写法定代表人联系方式"></el-input>
          </el-form-item>
          <el-form-item label="注册资本(万元)" prop="registeredCapital">
            <el-input-number v-model="baseInfoForm.registeredCapital" placeholder="请填写注册资本"></el-input-number>
          </el-form-item>
          <el-form-item label="所在地区">
            <el-cascader
              class="clickCascader"
              size="medium"
              :options="options"
              v-model="selectedOptions"
              @change="addressChange"
              style="width:100%">
            </el-cascader>
          </el-form-item>
          <el-form-item label="企业地址" prop="address">
            <el-input v-model="baseInfoForm.address" placeholder="请填写企业地址"></el-input>
          </el-form-item>
          <!-- <el-form-item label="上传营业执照扫描件">
            <el-upload
              :action="uploadUrl()"
              :headers="myHeader"
              :limit="limitNum"
              accept="image/jpeg,image/png"
              :on-success="onBaseInfoSuccess"
              :on-error="onError"
              :file-list="baseInfoPicList"
              ref="certiUpload"
              list-type="picture-card">
                <i class="el-icon-plus"></i>
                <div class="el-upload__tip" slot="tip">只能上传jpge/png文件，且不超过800kb</div>
            </el-upload>
          </el-form-item> -->
          <!-- <el-form-item label="上传营业执照扫描件">
                <el-upload
                 :action="uploadUrl()"
                  class="upload-ss"
                  accept =".jpg,.png"
                  :headers="myHeader"
                  :limit="limitNum"
                  :show-file-list="showList"
                  :on-success="onBaseInfoSuccess"
                  :file-list="baseInfoPicList"
                  :on-error="onError"
                  ref="certiUpload"
                 list-type="picture-card"
                 >
                 <i slot="default" class="el-icon-plus"></i>
                 <div class="div-icon" slot="file" @click="clickFilets(file)" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                 <span
                 class="el-upload-list__item-preview"
                 @click="imgHandlePictureCardPreview(file)"
                >
                <i class="el-icon-zoom-in"></i>
               </span>
               <span
                 class="el-upload-list__item-delete"
                 @click.stop="imgHandleRemove(file)"
               >
                 <i class="el-icon-delete"></i>
               </span>
              </span>
             </div>
             </el-upload>
             <!-- <el-dialog :visible.sync="imageDialogVisible">
             <img width="100%" :src="imgDialogImageUrl" alt="">
             </el-dialog> -->
            <!-- </el-form-item> -->

<el-form-item label="上传证书扫描件">
                <el-upload
                 class="upload-ss"
                 :action="uploadUrl()"
                  accept =".jpg,.png"
                  :headers="myHeader"
                  :limit="limitNum"
                  :show-file-list="showList"
                  :on-success="onBaseInfoSuccess"
                  :file-list="baseInfoPicList"
                  :on-error="onError"
                  ref="certiUpload"
                  list-type="picture-card"
                 >
                 <i slot="default" class="el-icon-plus"></i>
                 <div @click="clickFilets(file)" class="div-ssup" slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                 <span
                 class="el-upload-list__item-preview"
                 @click="imgHandlePictureCardPreview(file)"
                >
                <i class="el-icon-zoom-in"></i>
               </span>
               <span
                 v-if="!disabled"
                 class="el-upload-list__item-delete delete-sse"
                 @click.stop="imgHandleRemove(file)"
               >
                 <i class="el-icon-delete"></i>
               </span>
              </span>
             </div>
             </el-upload>
             <el-dialog :visible.sync="imageDialogVisible">
             <img width="100%" :src="imgDialogImageUrl" alt="">
             </el-dialog>
             <!-- 上传图片 -->
              </el-form-item>

          <el-form-item class="div-button">
            <el-button @click="isCompleted = true">取 消</el-button>
          <el-button type="primary" plain @click="dataFormSubmit()">保 存</el-button>
          </el-form-item>
        </el-form>
      </div>

              <!-- <el-form-item label="上传营业执照扫描件">
                <el-upload
                 :action="uploadUrl()"
                  accept =".jpg,.png"
                  :headers="myHeader"
                  :limit="limitNum"
                  :show-file-list="showList"
                  :on-success="onBaseInfoSuccess"
                  :file-list="baseInfoPicList"
                  multiple
                  :on-error="onError"
                  ref="certiUpload"
                 list-type="picture-card"
                 >
                 <i slot="default" class="el-icon-plus"></i>
                 <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                 <span
                 class="el-upload-list__item-preview"
                 @click="imgHandlePictureCardPreview(file)"
                >
                <i class="el-icon-zoom-in"></i>
               </span>
               <span
                 v-if="!disabled"
                 class="el-upload-list__item-delete"
                 @click="imgHandleRemove(file)"
               >
                 <i class="el-icon-delete"></i>
               </span>
              </span>
             </div>
             </el-upload>
             <el-dialog :visible.sync="imageDialogVisible">
             <img width="100%" :src="imgDialogImageUrl" alt="">
             </el-dialog>
            </el-form-item> -->


      <!-- <div v-if="active === 1" style="display: flex;padding:40px 0;">
        <div style="display: block;padding:30px 20px;border-right:1px solid #eff2f6;width:50%;box-sizing: border-box;">
            <el-card class="box-card" shadow="hover" v-for="(item,i) in certiInfoForms" :key="item.certiCode + 'd' + i" style="margin-bottom:10px;width:100%;">
              <div slot="header" class="clearfix">
                <span style="float:left;margin-right:10px;font-size:18px;">{{item.certiName}}</span>
                <el-button style="float:right;" size="mini" type="danger" plain @click="certiInfoForms.splice(i, 1)">删除</el-button>
                <el-button style="float:right;margin-right:10px;" size="mini" type="primary" plain @click="certiInfoForm = JSON.parse(JSON.stringify(item)); certiId = item.certiId; certiPicList = item.certiPicList; index = i">修改</el-button>
              </div>
              <div class="text item" style="padding: 15px 18px;">
                <el-form label-width="110px" class="queryForm">

                      <el-form-item label="资质证书类型：">
                        {{item.certiName}}
                      </el-form-item>

                      <el-form-item label="资质证书编号：">
                        {{item.certiCode}}
                      </el-form-item>

                      <el-form-item label="发证机关：">
                        {{item.releaseDeptName}}
                      </el-form-item>

                      <el-form-item label="发证日期：">
                        {{item.releaseTime? item.releaseTime.substring(0,10):''}}
                      </el-form-item>

                      <el-form-item label="有效期至：">
                        {{item.validityEndTime? item.validityEndTime.substring(0,10):''}}
                      </el-form-item>

                      <el-form-item label="资质范围：">
                        {{item.certiItemNames}}
                      </el-form-item>

                      <el-form-item label="资质证书：">
                        <viewer :images="[item.certiPic]">
                          <img v-for="(src,index) in [item.certiPic]" :src="remoteUrl + src" :key="index" style="width: 30px;height: 30px;"/>
                        </viewer>
                      </el-form-item>

                </el-form>
              </div>
            </el-card>
        </div>
        <div style="display:block;padding:20px 20px;text-align:center;width:50%;box-sizing: border-box;">
          <el-form :model="certiInfoForm" :rules="certiInfoRule" ref="certiInfoForm" label-width="140px">
            <el-form-item label="资质证书类型" prop="certiId">
              <el-select v-model="certiInfoForm.certiId" filterable placeholder="请选择资质证书类型" @change="changeCertiTypeName" style="width:100%">
                <el-option
                  v-for="item in certiTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资质范围" prop="certiItems">
              <el-select v-model="certiInfoForm.certiItems" filterable multiple placeholder="请选择资质范围" @change="changeLocationValue" style="width:100%">
                <el-option
                  v-for="item in jobs"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资质证书编号" prop="certiCode">
              <el-input v-model="certiInfoForm.certiCode" placeholder="请填写资质证书编号"></el-input>
            </el-form-item>
            <el-form-item label="发证机关" prop="releaseDeptName">
              <el-input v-model="certiInfoForm.releaseDeptName" placeholder="请填写发证机关"></el-input>
            </el-form-item>
            <el-form-item label="发证日期" prop="releaseTime">
              <el-date-picker type="date" v-model="certiInfoForm.releaseTime" placeholder="选择发证日期" style="width:100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="有效期至" prop="validityEndTime">
              <el-date-picker type="date" v-model="certiInfoForm.validityEndTime" placeholder="选择发证日期" style="width:100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="上传资质证书">
             <el-upload
                :action="uploadUrl()"
                :headers="myHeader"
                accept="image/jpeg,image/png"
                :limit="limitNum"
                :on-success="onCertiSuccess"
                :on-remove="onCertiRemove"
                :on-error="onError"
                ref="certiUpload"
                :file-list="certiPicList"
                list-type="picture-card">
                  <i class="el-icon-plus"></i>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过800kb</div>
              </el-upload>
            </el-form-item>

          </el-form>
          <div style="margin:0 auto;text-align: center;">
            <el-button style="margin-top:12px;" @click="isCompleted = true">取 消</el-button>
            <el-button style="margin-top:12px;" type="primary" plain @click="certiFormSubmit()">添 加</el-button>
            <el-button style="margin-top:12px;" type="primary" plain @click="next">下一步</el-button>
          </div>
        </div>
      </div> -->

      <!-- <div v-if="active === 1" style="padding:40px 80px;width:90%;margin:0 auto;">
        <div style="display:inline-block;width:100%;margin-bottom:30px;">
          <div style="display:block;width:15%;box-sizing:border-box;">
            <h3>基础信息</h3>
          </div>
          <div style="float:right;display:block;width:85%;box-sizing:border-box;">
            <el-form label-width="140px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="法定代表人">
                    <el-input v-model="baseInfoForm.businessEntity" placeholder="请填写法定代表人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="法定代表人手机号">
                    <el-input v-model="baseInfoForm.businessEntityMobile" placeholder="请填写法定代表人联系方式"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="注册资本(万元)：" style="margin-bottom: 0px;">
                    {{baseInfoForm.registeredCapital}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所在地区：" style="margin-bottom: 0px;">
                    {{baseInfoForm.region}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="企业地址：" style="margin-bottom: 0px;">
                    {{baseInfoForm.address}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="营业执照扫描件：" style="margin-bottom: 0px;">
                      <viewer :images="baseInfoPics">
                        <img v-for="(src,index) in baseInfoPics" :src="remoteUrl + src" :key="index" style="width: 60px;height: 60px;"/>
                      </viewer>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <!-- <div style="display:inline-block;width:100%;border-top:1px solid #eff2f6;">
          <div style="display:block;width:15%;box-sizing:border-box;">
            <h3>企业资质</h3>
          </div>
          <div style="float:right;display:block;width:85%;box-sizing:border-box;">
            <el-form label-width="140px" class="queryForm" v-for="(item,i) in certiInfoForms" :key="item.certiCode + 't' + i" style="margin-bottom:30px;">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="资质证书类型：">
                    {{item.certiName}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资质证书编号：">
                    {{item.certiCode}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="发证机关：">
                    {{item.releaseDeptName}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发证日期：">
                    {{item.releaseTime? item.releaseTime.substring(0,10):''}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="有效期至：">
                    {{item.validityEndTime? item.validityEndTime.substring(0,10):''}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资质证书：">
                    <viewer :images="[item.certiPic]">
                      <img v-for="(src,index) in [item.certiPic]" :src="remoteUrl + src" :key="index" style="width: 60px;height: 60px;"/>
                    </viewer>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="资质范围：">
                    {{item.certiItemNames}}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div> -->
        <!-- <div style="margin:0 auto;text-align: center;">
          <el-button style="margin-top:12px;" @click="isCompleted = true;active = 0">取 消</el-button>
          <el-button style="margin-top:12px;" type="primary" plain @click="dataFormSubmit()">完 成</el-button>
        </div>
      </div> -->
    </div>

    <div v-if="isCompleted" class="div-is" ref="completed">
      <div class="div-inquire">
      <div class="in-t">
          <div class="in-ts"></div>
          <h3>企业信息</h3>
        </div>
      </div>
      <div class="div-com">
        <div class="div-coms">
        <div class="div-img"></div>
        <div class="div-text">
        <div class="div-name">{{companys.tenantName}}</div>
        <div class="div-code">{{companys.certificateCode}}</div>
        </div>
        <!-- 修改 -->
        <div class="no-print">
          <el-button v-if="isAuth('tenant:tenantInfo:info')" class="button-xg" type="primary" size="small" @click="isCompleted = false;">修 改</el-button>
        </div>
        </div>
      </div>
      <div style="padding:10px 80px;width:90%;margin:0 auto;">
        <div style="display:block;padding:20px 20px;border-bottom:1px solid #eff2f6;width:100%;box-sizing:border-box;">
          <el-form label-width="160px" :label-position="labelPosition" class="queryForm">
            <!-- <el-row>
              <el-col :span="12">
                <el-form-item label="企业名称：">
                  {{tenantInfo.tenantName}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="社会统一信用代码：">
                  {{tenantInfo.certificateCode}}
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="注册资本(万元)：">
                  {{tenantInfo.registeredCapital}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所在地区：">
                  {{tenantInfo.region}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="法定代表人：">
                  {{tenantInfo.businessEntity}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="法定代表人联系方式：">
                  {{tenantInfo.businessEntityMobile}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系人：">
                  {{tenantInfo.contactPerson}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
<!--                <el-form-item label="联系人联系方式：">
                  {{tenantInfo.contactPersonMobile}}
                </el-form-item>-->
                <el-form-item label="企业地址：">
                  {{tenantInfo.address}}
                </el-form-item>
              </el-col>
            </el-row>
<!--            <el-row>
              <el-col :span="24">
                <el-form-item label="企业地址：">
                  {{tenantInfo.address}}
                </el-form-item>
              </el-col>
            </el-row>-->
            <el-row>
              <el-col :span="24">
                <el-form-item label="营业执照扫描件：">
                  <ele-image :urls="urls"></ele-image>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- <div style="display: block;padding:40px 20px;width:100%;box-sizing:border-box;">
          <el-form label-width="140px" class="queryForm" v-for="(item,i) in resourceInfos" :key="item.id + i" style="margin-bottom:30px;">
            <el-row>
              <el-col :span="12">
                <el-form-item label="资质证书类型：">
                  {{item.resourceName}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资质证书编号：">
                  {{item.resourceCode}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发证机关：">
                  {{item.releaseDeptName}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发证日期：">
                  {{item.releaseTime? item.releaseTime.substring(0,10):''}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="有效期至：">
                  {{item.validityEndTime? item.validityEndTime.substring(0,10):''}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资质证书：">
                  <ele-image :urls="[item.path]"></ele-image>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="资质范围：">
                  <div style="width:100%;">
                    <p v-for="subItem in item.certiItemNames" :key="subItem + 'c'">{{subItem}}</p>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  import EleImage from '@/components/ele-image/ele-image.vue'
  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
  const TIME_COUNT = 60
export default {
    data () {
      var validatePass = (rule, value, callback) => {
        if (!value || value === undefined || value.length != 11) {
          callback(new Error('请填写正确的手机号'))
        } else {
          callback()
        }
      }

      var validateRegisteredCapital = (rule, value, callback) => {
        if (value < 1) {
          callback(new Error('请填写正确金额'))
        } else {
          callback()
        }
      }
      return {
        visible: false,
        disabled: false,
        imageDialogVisible: false,
        labelPosition: 'left',
        active: 0,
        limitNum: 1,
        showList: true,
        index: -1,
        showEdit: false,
        // imgurl: '',
        showViewer: false,
        show: true,
        count: '',   // 初始化次数
        timer: null,
        certiPic: null,
        imgDialogImageUrl: null,
        isCompleted: false,
        options: regionData,
        selectedOptions: [],
        baseInfoPicList: [],
        certiPicList: [],
        baseInfoForm: {
          businessEntity: '',
          businessEntityMobile: '',
          password: '',
          code: '',
          registeredCapital: '',
          region: '',
          address: ''
        },
        baseInfoRule: {
          businessEntity: [
            { required: true, message: '请填写法定代表人', trigger: 'blur' }
          ],
          businessEntityMobile: [
            { required: true, validator: validatePass, message: '请填写法定代表人联系方式', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9\W_]{6,20}$/, message: '密码为数字，大小写字母，长度为6-20位' }
          ],
          code: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ],
          registeredCapital: [
            { required: true, validator: validateRegisteredCapital, message: '请填写注册资本', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请填写企业地址', trigger: 'blur' }
          ]
        },
        certiInfoForm: {
          certiId: '',
          certiName: '',
          certiCode: '',
          releaseDeptName: '',
          releaseTime: '',
          validityEndTime: '',
          certiItems: [],
          certiItemNames: '',
          certiItemIds: ''
        },
        certiInfoRule: {
          certiName: [
            { required: true, message: '请填写资质证书名称', trigger: 'blur' }
          ],
          certiCode: [
            { required: true, message: '请填写资质证书编号', trigger: 'blur' }
          ],
          releaseDeptName: [
            { required: true, message: '请填写发证单位', trigger: 'blur' }
          ],
          releaseTime: [
            { required: true, message: '请填写发证日期', trigger: 'blur' }
          ],
          validityEndTime: [
            { required: true, message: '请填写有效期至', trigger: 'blur' }
          ],
          certiItems: [
            { required: true, message: '请选择资质范围', trigger: 'blur' }
          ]
        },
        certiInfoForms: [],
        jobs: [],
        certiPic: '',
        baseInfoPics: [],
        remoteUrl: '',
        certiItemNames: '',
        tenantInfo: {},
        // resourceInfos: [],
        urls: [],
        certiTypes: [],
        certiId: '',
        companys: {}
      }
    },
    components: {
      EleImage, ElImageViewer
    },
    // mounted(){
    // this.getInfo()
    // },
    computed: {
      myHeader () {
        return {'token': Vue.cookie.get('token')}
      }
    },
    created () {
      this.getCompany()
      this.init()
    },
    watch: {
      certiId (n, o) {
        this.initJobs()
      }
    },
    methods: {
      onPreview () {
        this.showViewer = true
      },
        // 关闭查看器
      closeViewer () {
        this.showViewer = false
      },
      imgHandleRemove (file) {
        this.$refs.certiUpload.clearFiles()
        this.certiPic = '',
        this.baseInfoPicList = []
      },
      imgHandlePictureCardPreview (file) {
        this.imgDialogImageUrl = file.url
        this.imageDialogVisible = true
      },
      clickFilets (file) {
        this.imgHandlePictureCardPreview(file)
      },
      init () {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantInfo/check'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.isCompleted = data.isOk
            this.initCertiTypes()
            if (data.isOk) {
              this.getInfo()
            }
          }
        })
      },
      initCertiTypes () {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantInfo/getCertiType'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.certiTypes = data
          }
        })
      },
      changeCertiTypeName (val) {
        debugger
        this.certiInfoForm.certiItems = []
        this.jobs = []
        for (var i = 0; i < this.certiTypes.length; i++) {
          if (val === this.certiTypes[i].id) {
            this.certiInfoForm.certiName = this.certiTypes[i].name
            this.initJobs()
            break
          }
        }
      },
      getCompany () {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantInfo/info/0'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.companys = data.t
          }
        })
      },
      getInfo () {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantInfo/info/0'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tenantInfo = data.t
            this.baseInfoForm = {...this.baseInfoForm, ...data.t}
            // this.remoteUrl = data.remoteUrl
            // this.resourceInfos = data.resourceInfos
            // this.urls = data.certifInfoList[0].path
            // this.imgsrcList[0] = data.certifInfoList[0].path
            // debugger
            // if(data.resourceInfos && data.resourceInfos.length > 0){
            //   data.resourceInfos.forEach((c) => {
            //     let certiInfoForm = {
            //       certiName: c.resourceName,
            //       certiCode: c.resourceCode,
            //       releaseDeptName: c.releaseDeptName,
            //       releaseTime: c.releaseTime || '',
            //       validityEndTime: c.validityEndTime || '',
            //       certiItems: c.certiItems,
            //       certiItemNames: c.certiItemNames.join(","),
            //       certiItemIds: c.certiItems.join(","),
            //       certiPic: c.fileName,
            //       certiPicList: [{name: c.fileName, url: c.path}]
            //     }
            //     this.certiInfoForms.push(certiInfoForm)
            //   });
            // }
            this.urls = []
            // this.urls.length = 0;
            if (data.orgPic) {
              this.baseInfoPicList = []
              this.baseInfoPicList.push({name: data.orgPic.fileName, url: data.remoteUrl + data.orgPic.path})
              this.urls.push(data.remoteUrl + data.orgPic.path)
              this.baseInfoPics.push(data.orgPic.fileName)
            }
          }
        })
      },
      send () {
        if (!this.baseInfoForm.businessEntityMobile || this.baseInfoForm.businessEntityMobile.length != 11) {
          this.$message.error('请填写正确的手机号')
          return
        }
        if (!this.timer) {
          this.$http({
            url: this.$http.adornUrl('/sys/sendMobileCaptchaAndCheck'),
            method: 'get',
            params: this.$http.adornParams({
              'mobile': this.baseInfoForm.businessEntityMobile
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.count = TIME_COUNT
              this.show = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--
                } else {
                  this.show = true
                  clearInterval(this.timer)  // 清除定时器
                  this.timer = null
                }
              }, 1000)
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      },
      changeLocationValue (val) {
        let names = []
        for (let i = 0; i < val.length; i++) {
          this.jobs.find((item) => {
            if (item.code == val[i]) {
              names.push(item.name)
            }
          })
        }
        this.certiItemNames = names.join(',')
      },
      next () {
        if (this.active === 0) {
          this.$refs['baseInfoForm'].validate((valid) => {
            if (valid) {
              this.active++
            }
          })
        } else {
          if (this.active++ > 2) this.active = 0
        }
      },
      addressChange (arr, a, b, c) {
        this.baseInfoForm.region = CodeToText[arr[0]] + '/' + CodeToText[arr[1]] + '/' + CodeToText[arr[2]]
      },
      onCertiSuccess (response, file, fileList) {
        // this.remoteUrl = response.remoteUrl + 'pic/'
        this.certiPic = response.remoteUrl + 'pic/' + response.fileName
      },
      onCertiRemove (file, fileList) {
        // this.remoteUrl = null
        // this.certiPic = null
        this.certiInfoForm.certiPicList = this.certiInfoForm.certiPicList.filter(val => {
          return val.name == file.name
        })
      },
      onBaseInfoSuccess (response, file, fileList) {
        this.certiPic = response.fileName
        this.imgDialogImageUrl = response.remoteUrl + response.fileName
        if (response.code === 500) {
          this.$message.error(response.msg)
        } else {
          this.remoteUrl = response.remoteUrl + 'pic/'
          this.baseInfoPics = []
          for (var i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              this.baseInfoPics.push(fileList[i].response.fileName)
            } else {
              this.baseInfoPics.push(fileList[i].name)
            }
          }
        }
      },
      onError (err, file, fileList) {
        this.$message.error('上传失败')
      },
      uploadUrl () {
        return this.$http.adornUrl('/tenant/tenantInfo/upload')
      },
      initJobs () {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantInfo/getCertiTree'),
          method: 'get',
          params: {type: this.certiInfoForm.certiName}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.jobs = data
          }
        })
      },
      // certiFormSubmit(){
      //   this.$refs['certiInfoForm'].validate((valid) => {
      //     if (valid) {
      //       this.certiInfoForm.releaseTime = this.$dateFormat(this.certiInfoForm.releaseTime)
      //       this.certiInfoForm.validityEndTime = this.$dateFormat(this.certiInfoForm.validityEndTime)
      //       this.certiInfoForm.certiItems = this.certiInfoForm.certiItems
      //       this.certiInfoForm.certiItemIds = this.certiInfoForm.certiItems.join(",")
      //       if(this.certiItemNames){
      //         this.certiInfoForm.certiItemNames = this.certiItemNames
      //       }
      //       if(this.certiPic){
      //         this.certiInfoForm.certiPic = this.certiPic
      //         this.certiInfoForm.certiPicList = [{name: this.certiPic, url: this.remoteUrl + this.certiPic}]
      //       }
      //       if(this.index > -1){
      //         this.certiInfoForms[this.index] = this.certiInfoForm
      //         this.index = -1
      //       } else {
      //         this.certiInfoForms.push(this.certiInfoForm)
      //       }
      //       // debugger
      //       this.certiPic = ''
      //       this.certiPicList = []
      //       this.certiInfoForm = {
      //         certiId: '',
      //         certiName: '',
      //         certiCode: '',
      //         releaseDeptName: '',
      //         releaseTime: '',
      //         validityEndTime: '',
      //         certiItems: [],
      //         certiItemNames: '',
      //         certiItemIds: '',
      //         certiPic: '',
      //         certiPicList: []
      //       }
      //     }
      //   })
      // },
      dataFormSubmit () {
        this.$refs.baseInfoForm.validate((valid) => {
          if (valid) {
            let data = this.$http.adornData({
              'businessEntity': this.baseInfoForm.businessEntity,
              'businessEntityMobile': this.baseInfoForm.businessEntityMobile,
              'password': this.baseInfoForm.password,
              'code': this.baseInfoForm.code,
              'registeredCapital': this.baseInfoForm.registeredCapital,
              'region': this.baseInfoForm.region,
              'address': this.baseInfoForm.address,
              'certiPic': this.certiPic,
              'certiInfos': this.certiInfoForms
            })
        // debugger
            this.$http({
              url: this.$http.adornUrl(`/tenant/tenantInfo/update`),
              method: 'post',
              data: data
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getInfo()
                    this.$store.commit('bizz/infoComplete', true)
                // this.gotoRouteHandle()
                    this.isCompleted = true
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      gotoRouteHandle () {
        this.$router.push({name: 'company-deptInfo'})
      }
    }
  }
</script>

<style lang="scss" scoped>
.mod-div{
  padding-left: 15px !important;
  padding-top: 15px !important;
  padding-right: 15px !important;
  padding-bottom: 35px !important;
  background-color: #F5F7FA;
}
/deep/.div-icon{
.el-upload-list__item-delete{
  z-index:10
}
.el-upload-list__item-actions{
  z-index:-1
}
}
.div-com{
  width: 100%;
  height: 70px;
  background-color:#ffffff;
  display: flex;
  justify-content: center;
  // border: 1px solid ;
}
.no-print{
  width: 10%;
  float: right;
  .button-xg{
    float: right;
  }
}
.div-coms{
  width: 85%;
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EBEEF5;

}
.div-img{
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 20px;
  background: url(~@/assets/img/qiye.png);
  background-size: 100% 100%;
}
.div-text{
  width: 90%;
  height: 50px;
  float: left;
  margin-top: 10px;
  // display: flex;
  // align-items: center;
}
.div-name{
  font-size: 18px;
  font-weight: 500;
  opacity: 0.85;
  color: #000000;
}
.div-code{
  font-size: 14px;
  font-weight: 400;
  opacity: 0.65;
  color: #000000;
}
.div-tx{
  width:100%;
  padding:40px 80px;
  // margin:0 auto;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  .div-form{
    width: 65%;
  }
  .el-input {
  width: 85%;
  }
  .clickCascader{
    width: 85% !important;
  }
}
.div-is{
  background-color: #ffffff;
  h3{
    font-size: 16px;
  }
}
.div-ws{
  h3{
    font-size: 16px;
  }
}
.div-button{
  display: flex;
  justify-content: center;
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  padding-left: 15px;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
.in-t{
  width: 50%;
  float: left;
  // margin-top: 15px;
  height: 45px;
  display: flex;
  align-items: center;
  h3{
    font-size: 16px;
    float: left;
    color: #000000;
    margin: 0px !important;
    padding: 0px !important;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
/deep/.el-form-item--medium{
  .el-form-item__content{
    p{
      margin: 0 !important;
    }
  }
}
// .clickCascader{
//    .el-cascader__dropdown{
//       overflow: hidden !important;
//       overflow-x: auto !important;
//       overflow-y: auto !important;
//     }
//     .el-cascader-menu{
//       overflow: hidden !important;
//     }
//     .el-scrollbar__wrap{
//       margin-bottom: 0 !important;
//       margin-right: 0 !important;
//     }
// }

    .demo-drawer {
        &__content {
            display: flex;
            flex-direction: column;
            height: 100%;
            form {
                flex: 1;
            }
        }
        &__footer {
            display: flex;
            button {
                flex: 1;
            }
        }
        &__header {
            text-align:right;
            margin-bottom:20px;
            width:100%;
        }
    }
    .el-drawer__body {
        padding: 20px;
    }

    .el-upload-dragger{
      width: 100%;
    }
    .el-steps--horizontal{
      width: 60%;
      margin: 0 auto;
    }
    .el-scrollbar__wrap {
      overflow: hidden;
    }
    .queryForm .el-form-item{
      margin-top: 20px;
      margin-bottom: 0px;
    }
    .el-col-13{
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    .el-button--warning {
      color: #fc8e2d;
      background-color: #fff;
      border-color: #fc8e2d;
    }
    .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 480px;
  }
  .el-card__header {
    padding: 10px 20px;
  }
</style>
<style>
.el-cascader-menu{
overflow: hidden !important;
}
</style>
